<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>NexusGo - 探索</title>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              "primary": "#171717", 
              "background-light": "#ffffff", 
            },
            fontFamily: {
              "display": ["Plus Jakarta Sans", "'Noto Sans SC'", "sans-serif"]
            },
            borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
          },
        },
      }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
    </style>
</head>
<body class="bg-background-light font-display text-gray-800">
<div class="flex h-screen w-full flex-col">
<header class="flex h-16 shrink-0 items-center justify-between border-b border-gray-200 bg-white px-6">
<div class="flex items-center gap-4">
<a class="flex items-center gap-3" href="#">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8" data-alt="NexusGo application logo" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDrlDLv4JOSepFi_jvE3BowVutFrYXryh1ffH-qIUt1JnQ8Dhg5xaHelUYFnWZBU-Q-Ru3AhpivVgQhCls7agY9-rkK4F-fQhR6H6hG3pJe7nLxiFbfSljMI_7iiirSdy5kTrmX6tgmQz0rBjcgJNOei-PJ-zEZMd5rXMb6BYSQ-oDI_JOf4e2rVfW5Z4aKCdwC-y1OXWrCuIrQS7m4y8Qu9k3B9Fp30G_sx358SghpGteLWgLsKphzBpavtpOlSyfvrjVCm_ZuNQ"); filter: grayscale(100%);'></div>
<h1 class="text-gray-900 text-lg font-bold leading-normal">NexusGo</h1>
</a>
<nav class="hidden md:flex items-center gap-2">
<a class="flex h-9 items-center justify-center rounded-lg px-4 text-sm font-medium text-gray-900 hover:bg-gray-100" href="#">首页</a>
<a class="flex h-9 items-center justify-center rounded-lg px-4 text-sm font-medium text-gray-500 hover:bg-gray-100 transition-colors" href="#">我的行程</a>
<a class="flex h-9 items-center justify-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-900 transition-colors" href="#">探索</a>
<a class="flex h-9 items-center justify-center rounded-lg px-4 text-sm font-medium text-gray-500 hover:bg-gray-100 transition-colors" href="#">收藏</a>
</nav>
</div>
<div class="flex items-center gap-4">
<button class="relative rounded-full p-2 text-gray-500 hover:bg-gray-100">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="flex items-center gap-2 rounded-full border border-gray-200 py-1 pl-1 pr-3 hover:bg-gray-100">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-7" data-alt="User avatar" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDGMVebZVq9TM2no0TeE77PL98cZmJmkvPrGZCxZFURoqv4rlM50AAGv9qwL1Yj1IgISZfvNOAeGxbKixlgZVcSzgp8oUl2KTteojQctx25J9VVhvh3f7ZOR_QJxh1eJfCeS3V9ABKN6sRubtuD90QZf-u7oGcRU8LxMWVJVUFVonnX5giz13g9Xfxtw46vy1gTYz_0p_4otE9WTCYBQRWtSM6FRECNNO9n23emyolKnLt5HXq2Dddb3Ac3_hc0vqHlU1FfMtplrg");'></div>
<span class="text-sm font-medium text-gray-700">王</span>
</button>
</div>
</header>
<main class="flex-1 grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-12 overflow-hidden">
<div class="flex flex-col col-span-1 lg:col-span-1 xl:col-span-4 h-full bg-background-light border-r border-gray-200 overflow-y-auto">
<div class="p-4 sticky top-0 bg-background-light z-10 border-b border-gray-200">
<div class="flex flex-wrap justify-between gap-3 mb-4">
<div class="flex flex-col gap-1">
<p class="text-gray-900 text-2xl font-bold leading-tight tracking-tight">探索附近</p>
<p class="text-gray-500 text-sm font-normal leading-normal">在 北京 寻找地点并添加到您的行程中</p>
</div>
</div>
<label class="flex flex-col min-w-40 h-12 w-full">
<div class="flex w-full flex-1 items-stretch rounded-lg h-full">
<div class="text-gray-400 flex border border-gray-300 bg-white items-center justify-center pl-4 rounded-l-lg border-r-0">
<span class="material-symbols-outlined">search</span>
</div>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-r-lg text-gray-900 focus:outline-0 focus:ring-2 focus:ring-gray-500/50 border border-gray-300 bg-white focus:border-gray-500 h-full placeholder:text-gray-400 px-4 pl-2 text-base font-normal leading-normal" placeholder="搜索景点、餐厅等" value=""/>
</div>
</label>
<div class="flex gap-2 p-1 flex-wrap mt-3 -mx-1">
<button class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-primary text-white pl-3 pr-4">
<span class="material-symbols-outlined text-base">attractions</span>
<p class="text-sm font-medium leading-normal">景点</p>
</button>
<button class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-gray-100 pl-3 pr-4 text-gray-700 hover:bg-gray-200">
<span class="material-symbols-outlined text-base">restaurant</span>
<p class="text-sm font-medium leading-normal">餐厅</p>
</button>
<button class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-gray-100 pl-3 pr-4 text-gray-700 hover:bg-gray-200">
<span class="material-symbols-outlined text-base">local_activity</span>
<p class="text-sm font-medium leading-normal">活动</p>
</button>
<button class="flex h-8 shrink-0 items-center justify-center gap-x-2 rounded-lg bg-gray-100 pl-3 pr-4 text-gray-700 hover:bg-gray-200">
<span class="material-symbols-outlined text-base">hotel</span>
<p class="text-sm font-medium leading-normal">酒店</p>
</button>
</div>
<div class="flex flex-col -mx-2">
<details class="flex flex-col border-t border-gray-200 mt-3 pt-2 group">
<summary class="flex cursor-pointer list-none items-center justify-between gap-6 py-2 px-2">
<p class="text-gray-700 text-sm font-medium leading-normal">筛选</p>
<span class="material-symbols-outlined text-gray-500 group-open:rotate-180 transition-transform duration-200">expand_more</span>
</summary>
<div class="text-gray-500 text-sm font-normal leading-normal px-2 pb-2">
<p>此处将放置用于价格、评分的滑块组件和“立即开放”的切换开关。</p>
</div>
</details>
</div>
</div>
<div class="flex flex-col gap-4 p-4">
<div class="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-3 hover:shadow-md hover:border-gray-500/50 transition-all duration-200 cursor-pointer">
<div class="relative w-full h-40 rounded-lg bg-cover bg-center" data-alt="故宫博物院照片" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYASXJ5p14iQpRXEGSENh9ekrJ7G_h0FqfxGHwbzlfidy25H2NznVHL_KFg1zEmP68yGoxKoN0nauACxQJlctnM96IP_Z-4LVDo7QKB1rlY_ZxJ4WKSw_KvKhKoNxXODGIBShOsFNXf_4kzFMBFExV4guv4ZeVZjXNaxqUAMhgnC0pwl4r1Rvef_0GLJxQMdZwSb3pEoNa_3KT4UQktHGt53nBbWT-H8ufV2D_IuGLmUBPSc35SjvGDd7XVoTRtaR0TMKYDxVilw'); filter: grayscale(100%);"></div>
<div class="flex flex-col gap-2">
<div class="flex justify-between items-start">
<div class="flex flex-col">
<h3 class="text-base font-bold text-gray-900">故宫博物院</h3>
<p class="text-sm text-gray-500">明清两代的皇家宫殿</p>
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-gray-400 text-base" style="font-variation-settings: 'FILL' 1;">star</span>
<p class="text-sm font-medium text-gray-800">4.7</p>
<p class="text-xs text-gray-500">(8.8k)</p>
</div>
</div>
<button class="flex items-center justify-center gap-2 w-full h-10 px-4 rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined">add_circle</span>
<span class="text-sm font-semibold">添加到行程</span>
</button>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-3 hover:shadow-md hover:border-gray-500/50 transition-all duration-200 cursor-pointer">
<div class="relative w-full h-40 rounded-lg bg-cover bg-center" data-alt="一碗北京烤鸭" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBf7059Dh-LLoLPtfOD-YjTg6sIuZ7g9NAm2ZtSoMxgyZQDYKj08Y2MDHU69lewCGoC4Gv4gvnZdocT86dWE029dN6qO97C_qIxXbYWhpPwrwsfSnIWiEVlMR9YPPPhmfK9iCNKJc_tI6q4sZfOyKT7G_UvFutNVxDs03eb8s8YQRyfLhZGKcB7_rzgzoM8lwL-WzZz8RKDecVdx4KFh4IRuCMdnTaU3pKjjUpeSokitew9T5Ges0OXSaQi5UV6TE-YaZdOCtinQg'); filter: grayscale(100%);"></div>
<div class="flex flex-col gap-2">
<div class="flex justify-between items-start">
<div class="flex flex-col">
<h3 class="text-base font-bold text-gray-900">全聚德烤鸭</h3>
<p class="text-sm text-gray-500">享誉世界的北京烤鸭</p>
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-gray-400 text-base" style="font-variation-settings: 'FILL' 1;">star</span>
<p class="text-sm font-medium text-gray-800">4.5</p>
<p class="text-xs text-gray-500">(5.2k)</p>
</div>
</div>
<button class="flex items-center justify-center gap-2 w-full h-10 px-4 rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined">add_circle</span>
<span class="text-sm font-semibold">添加到行程</span>
</button>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-3 hover:shadow-md hover:border-gray-500/50 transition-all duration-200 cursor-pointer">
<div class="relative w-full h-40 rounded-lg bg-cover bg-center" data-alt="天坛公园祈年殿照片" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAlImIkJ2DersFo-VeqV82J16OX1DEbkXVOwbFt_vCFyTnrVVsHKXeVDGGt8HsqbxsYRJN9e1PWvrInRQztOoFnGrzUNe3idm8cfDiMdkSol4NIwDWUSsI_Y4XUbXVhw5UDjAta7CPc0epCbGhNFknSeRpv5GbeGp4lOGNHoRpQuD9LqkYbJ-TnXS9unhb6UhoYsJIujbtPMSqpMZVWacmqeU4M6V7KnMJTEubgRVh3g2VHii6hv_Qj9BNVs7kwlUr7kv1y5r0GmA'); filter: grayscale(100%);"></div>
<div class="flex flex-col gap-2">
<div class="flex justify-between items-start">
<div class="flex flex-col">
<h3 class="text-base font-bold text-gray-900">天坛公园</h3>
<p class="text-sm text-gray-500">皇帝祭天、祈谷的场所</p>
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined text-gray-400 text-base" style="font-variation-settings: 'FILL' 1;">star</span>
<p class="text-sm font-medium text-gray-800">4.8</p>
<p class="text-xs text-gray-500">(6.1k)</p>
</div>
</div>
<button class="flex items-center justify-center gap-2 w-full h-10 px-4 rounded-lg bg-gray-100 text-gray-800 hover:bg-gray-200 transition-colors">
<span class="material-symbols-outlined">add_circle</span>
<span class="text-sm font-semibold">添加到行程</span>
</button>
</div>
</div>
</div>
</div>
<div class="relative col-span-1 lg:col-span-2 xl:col-span-8 h-full bg-gray-300">
<div class="w-full h-full bg-center bg-cover" data-alt="一张北京的风格化地图，显示街道和地标" data-location="中国，北京" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC4-2uzIvtyz1Q9FGdj2gENy8jQdfYGExz9B68pSeTkA34U0Las9qpWFI2A8R-rHwN-icBHI5U3jgPuo6G4KO38OYk8OwbwYCawZnrhfMW1ET-vvvufsgranTxXIlwLIMsWAOiUVuAda_MDW6MzzgVKcM92v80xhyZTQd1nRF906L9Cm7V7eh8TzyRYqGIglZS8Meva6MRR-r1lATfN2JitoR8rl8AI7klzXl-qcbsC18SxE4eKonqF5U5A1E5aITqrsM5cr2LLBA'); filter: grayscale(1); opacity: 0.8;">
</div>
<button class="absolute bottom-6 right-6 flex items-center gap-3 h-12 px-5 rounded-full bg-primary text-white shadow-lg hover:bg-primary/90 transition-colors">
<span class="material-symbols-outlined">list_alt</span>
<span class="font-semibold">查看行程</span>
<span class="flex items-center justify-center h-6 w-6 rounded-full bg-white text-primary text-sm font-bold">3</span>
</button>
</div>
</main>
</div>

</body></html>